<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>企业信息</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3576974_v9c8ti37y2c.css">
    <link href="./layui/css/layui.css" rel="stylesheet">
    <style>
        *{
            margin: 0 ;
            padding: 0;
            transition: all linear .2s;
        }
        body, button, input, option, select, td, textarea {
            font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        a, b, body, button, dd, div, dl, em, footer, form, h1, h2, h3, h4, h5, h6, i, input, label, li, nav, p, select, span, td, textarea, u, ul {
            padding: 0;
            margin: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-text-size-adjust: none;
        }
        #header {
            width: 100%;
            height: 49px;
            background: #202329;
            box-shadow: 0 1px 8px rgb(0 0 0 6);
            position: relative;
            z-index: 1005;
            float: left;
        }
        #header a {
            color: #fff;
            font-size: 14px;
        }
        a {
            text-decoration: none;
        }
        .logo {
            float: left;
            padding: 6px 0 0 0;
        }
        .logo a {
            display: block;
            width: 110px;
            height: 36px;
            background: url(https://static.zhipin.com/zhipin-geek/v568/web/geek/images/logo-2x.png) 3px 7px no-repeat;
            background-size: 105px 19px;
        }
        .inner {
            width: 1184px;
            margin: 0 auto;
        }
        .home-inner {
            max-width: 1184px;
        }
        .nav-figure img {
            width: 26px;
            height: 26px;
            border-radius: 100%;
            vertical-align: middle;
        }
        li {
            list-style: none;
            display: inline;
        }
        .nav, .user-nav {
            float: left;
            margin-left: 15px;
            height: 49px;
            line-height: 49px;
        }
        .nav li a, .user-nav li a {
            float: left;
            display: block;
            padding: 0 5px;
            position: relative;
        }
        .nav li, .user-nav li {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            font-size: 14px;
            margin: 0 7px;
        }
        .nav-search {
            float: left;
            position: relative;
            width: 170px!important;
            padding: 10px 0 0 20px!important;
        }
        .nav-search .ipt-search {
            border: 1px #5dd5c8 solid;
            width: 150px;
            height: 20px;
            padding: 3px 12px;
            line-height: 20px;
            border-radius: 20px;
            font-size: 12px;
            background: 0 0;
            color: #9fa3b0;
        }
        .nav-search .btn-search {
            width: 28px;
            height: 26px;
            background-position: 10px -1719px;
            background-color: transparent;
            position: absolute;
            top: 10px;
            right: 0;
        }
        .btn-search {
            border:none;
            color: #fff;
            font-size: 22px;
            line-height: 29px;
        }
        #header .search-form-con {
            width: 200px;
        }
        .nav-search .btn-search {
            width: 28px;
            height: 26px;
            background-position: 10px -1719px;
            background-color: transparent;
            position: absolute;
            top: 10px;
            right: 0;
        }
        .user-nav {
            float: right;
            margin-left: 5px;
            position: relative;
        }
        .nav, .user-nav {
            margin-left: 15px;
            height: 49px;
            line-height: 49px;
        }
        .label-text {
            padding-right: 20px;
        }
        .nav-figure .dropdown {
            display: none;
            position: absolute;
            width: 234px;
            left: auto;
            right: 0;
            top: 49px;
            z-index: 2;
            text-align: left;
            -webkit-box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            background-color: #f2f5fa;
        }
        .dropdown {
            display: none;
            width: 202px;
        }
        #header .nav-figure .dropdown a.vip-info {
            position: relative;
            height: 84px;
            padding: 0;
            width: 234px;
        }
        #header .nav-figure .dropdown a {
            position: relative;
            padding: 10px 25px;
            line-height: 22px;
            /*color: #414a60;*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: #fff;
        }
        #header .nav-figure .dropdown a.vip-info .vip-card-bg {
            width: 202px;
            height: 63px;
            position: absolute;
            top: 10px;
            left: 15px;
            border-radius: unset;
        }
        .nav-figure img {
            width: 26px;
            height: 26px;
            border-radius: 100%;
            vertical-align: middle;
            *margin-top: -2px;
        }
        img {
            border: none;
        }
        .nav-figure .dropdown {
            display: none;
            position: absolute;
            width: 234px;
            left: auto;
            right: 0;
            top: 49px;
            z-index: 2;
            text-align: left;
            -webkit-box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            background-color: #f2f5fa;
        }
        #header .nav-figure .dropdown a .status {
            position: absolute;
            z-index: 1;
            font-size: 16px;
            font-weight: 600;
            color: #805430;
            left: 30px;
            top: 20px;
        }
        #header .nav-figure .dropdown a .desc {
            position: absolute;
            z-index: 1;
            font-size: 12px;
            color: #805430;
            line-height: 17px;
            left: 30px;
            bottom: 20px;
        }
        #header .nav-figure .dropdown a {
            display: block;
            width: 184px;
            position: relative;
            padding: 10px 25px;
            line-height: 22px;
            color: #414a60;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: #fff;
        }
        #header .nav-figure .dropdown a .link {
            position: absolute;
            z-index: 1;
            font-size: 12px;
            color: #805430;
            line-height: 17px;
            right: 30px;
            bottom: 20px;
        }
        #header .nav-figure .dropdown a .link img {
            width: 12px;
            height: 12px;
        }
        #header .nav-figure .dropdown a span {
            display: block;
            font-size: 12px;
            color: #9fa3b0;
            line-height: 22px;
        }
        #header .nav-figure .dropdown a.link-logout, #header .nav-figure .dropdown a.link-recruit {
            margin-top: 6px;
        }
        .nav-figure:hover .dropdown {
            display: block;
        }
        #header a:hover {
            color: #00d7c6;
        }
        #header .nav-figure .dropdown a:hover {
            background-color: #f2f5fa;
            color: #414a60;
        }
        #header .nav-figure .dropdown a.link-logout:hover, #header .nav-figure .dropdown a.link-recruit:hover {
            background-color: #fff;
            color: #00d7c6;
            cursor: pointer;
        }
        .main {
            width: 100vw;
            height: 990px;
            background-color: rgb(238,240,245);
        }
        .item {
            width: 1500px;
            height: 900px;
            padding-top: 60px;
            margin: 0 auto;
            position: relative;
            background: rgb(255,255,255);
        }
        .item_left {
            width: 300px;
            height: 900px;
            position: absolute;
            background-color: rgb(248,249,252);
        }
        .item_left  div {
            width: 300px;
            height: 50px;
            text-align: center;
            padding-top: 20px;
            cursor: pointer;
            line-height: 35px;
            font-size: 18px;
        }
        .item_left div:hover {
            background-color: rgb(227,231,237);
        }
        .item_right {
            width: 1200px;
            height: 900px;
            float: right;
            position: relative;
            overflow: auto;
        }
        .item_right_one {
            /*display: none;*/
        }
        .item_right_two {
            display: none;
        }
        .item_right_one img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            position: absolute;
            right: 50px;
        }
        .item_right_one_one h2 {
            line-height: 100px;
            margin-left: 60px;
            font-size: 30px;
        }
        .item_right_one_one {
            width: 1200px;
            height: 100px;
            position: relative;
            /*background-color: #00d7c6;*/
        }
        .item_right_one_one span {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 100px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }
        .item_right_one_two {
            width: 1200px;
            height: 120px;
            position: relative;
        }
        .item_right_one_two div:nth-child(1) {
            margin-left: 60px;
            padding: 5px;
        }
        .item_right_one_two div:nth-child(2) {
            margin-left: 60px;
            padding: 5px;
        }
        .item_right_one_two img {
            position: absolute;
            top: 0px;
        }
        .item_right_one_two div,span {
            font-size: 18px;
        }
        .item_right_one_two span:nth-child(2) {
            margin-left: 15px;
            font-size: 14px;
            color: rgb(255,209,173);
        }
        .one_br {
            width: 1100px;
            height: 1px;
            background-color: rgb(237,240,245);
            margin: 0 auto;
        }
        .item_right_one_three {
            width: 100%;
            height: 140px;
            line-height: 60px;
            position: relative;
        }
        .item_right_one_three h2 {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }
        .item_right_one_three span:nth-child(2){
            margin-left: 60px;
        }
        .item_right_one_three span:nth-child(3) {
            margin-left: 20px;
            font-size: 16px;
            color: rgb(141,145,160);
        }
        .item_right_one_three span:nth-child(4) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }
        .item_right_one_four {
            width: 100%;
            height: 150px;
            line-height: 60px;
            position: relative;
        }
        .item_right_one_four div:nth-child(1) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }
        .item_right_one_four span:nth-child(2) {
            position: absolute;
            top: 0px;
            left: 230px;
            font-size: 16px;
            color: rgb(141,145,160);
        }
        .item_right_one_four span:nth-child(3) {
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141,145,160);
        }
        .item_right_one_four span:nth-child(4) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }
        .item_right_one_five {
            width: 100%;
            height: 200px;
            line-height: 60px;
            position: relative;
        }
        .item_right_one_five h2:nth-child(1){
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }
        .item_right_one_five span:nth-child(2){
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141,145,160);
            position: absolute;
            top: 50px;
        }
        .item_right_one_five h2:nth-child(3){
            font-size: 24px;
            margin-left: 60px;
            margin-top: 80px;
        }
        .item_right_one_five span:nth-child(4){
            margin-left: 60px;
        }
        .item_right_one_five span:nth-child(5) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }
    </style>
</html>

<body>
<div id="header">
    <div class="inner home-inner">
        <div class="logo">
            <a href="#" title="BOSS直聘"></a>
        </div>
        <div class="nav">
            <ul>
                <li class=""><a href="#/">首页</a></li>
                <li class=""><a href="#">职位</a></li>
                <li class=""><a class="nav-school-new" href="#">校园</a></li>
                <li class=""><a class="nav-overseas-new" href="#">海归</a></li>
                <li class="cur"><a href="#">公司</a></li>
                <li class=""><a href="#">APP</a></li>
                <li class=""><a href="#">资讯</a></li>
                <li class=""><a class="nav-find" href="#">有了</a></li>
                <li class=""><a class="nav-baike" href="#">百科</a></li>
            </ul>
        </div>
        <div class="nav-search search-box">
            <form action="https://www.zhipin.com/job_detail/" method="get" target="_blank">
                <div class="search-form-con">
                    <p class="ipt-wrap"><input type="text" class="ipt-search" autocomplete="off" maxlength="50" placeholder="搜索职位、公司"></p>
                </div>
                <input type="hidden" class="city-code" value="">
                <input type="hidden" value="8">
                <button type="submit" class="iconfont icon-sousuo btn-search"></button>
                <div class="suggest-result">
                    <ul></ul>
                </div>
            </form>
        </div>
        <div class="user-nav">
            <ul>
                <li class=""><a href="#">消息<span class="nav-chat-num"></span></a></li>
                <li class="nav-figure">
                    <a href="#">
                        <span class="label-text"></span><img src="https://img.bosszhipin.com/boss/avatar/avatar_16.png" alt="">
                    </a>
                    <div class="dropdown">
                        <a href="#" class="vip-info"><img class="vip-card-bg" src="https://img.bosszhipin.com/static/file/2021/nlqoyjpgok1634714031765.png" alt=""><span class="status">升级VIP</span><span class="desc">尊享8大招聘权益</span><span class="link">去升级<img src="https://img.bosszhipin.com/static/file/2021/wjs8nyjn4a1634714117134.png " alt=""></span></a>
                        <a href="#" class="personal-center" onclick="personShow()">个人中心<span>推荐职位、编辑在线简历</span></a>
                        <a href="#" class="account-set">账号与安全中心</a>
                        <a href="#" class="privacy-set">通知与隐私设置</a>
                        <a href="#" class="account-set">面试</a>
                        <a href="#" class="privacy-set">招聘数据</a>
                        <a href="#" class="privacy-set">账户权益</a>
                        <a class="link-recruit">切换为求职者</a>
                        <a class="link-logout">退出登录</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="main_item">
        <div class="item">
            <div class="item_left">
                <div class="item_left_one" onclick="personShow()">个人信息</div>
                <div class="item_left_two" onclick="personUpdate()">个人信息编辑</div>
                <div class="item_left_four">地址管理</div>
            </div>
            <div class="item_right">
                <div class="item_right_one">
                    <div class="item_right_one_one">
                        <h2>个人信息</h2>
                        <span onclick=personUpdate() id="person_edit">编辑</span>
                    </div>
                    <div class="item_right_one_two">
                        <div>姓名：<span>张三</span></div>
                        <div>职务：<span>招聘者</span><span>审核中</span></div>
                        <div><img src="images/avatar_16.png"></div>
                    </div>
                    <div class="one_br"></div>
                    <div class="item_right_one_three">
                        <h2>手机号</h2>
                        <span>152*****2626</span>
                        <span>(如需修改，请点击编辑修改)</span>
<!--                        <span>编辑</span>-->
                    </div>
                    <div class="one_br"></div>
                    <div class="item_right_one_four">
                        <div>接收简历邮箱</div>
                        <span>收到附件简历后自动发送到邮箱</span>
                        <span>您暂未添加常用邮箱</span>
<!--                        <span>添加</span>-->
                    </div>
                    <div class="one_br"></div>
                    <div class="item_right_one_five">
                        <h2>切换身份</h2>
                        <span>若想切换身份，可在修改中“切换为牛人身份”，刷新本页面即可进行求职</span>
                        <h2>您当前的身份是:</h2>
                        <span>"BOSS"</span>
                        <span>修改</span>
                    </div>
                </div>
                <div class="item_right_two">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>编辑个人信息</legend>
                    </fieldset>

                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="姓名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1" style="margin-left:30px">上传头像</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                            <div style="width: 95px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="手机号码" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码框</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <div class="layui-inline">-->
<!--                                <label class="layui-form-label">验证手机</label>-->
<!--                                <div class="layui-input-inline">-->
<!--                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input demo-phone">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">验证码</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                            <div class="layui-form-mid" style="padding: 0!important;">-->
<!--                                <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="邮箱" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-block">
                                <select name="interest" lay-filter="aihao">
                                    <option value="1" selected="">招聘者</option>
                                    <option value="0">求职者</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单选框</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男" checked="">
                                <input type="radio" name="sex" value="女" title="女">
                                <input type="radio" name="sex" value="禁" title="禁用" disabled="">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">个人介绍</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="item_right_three"></div>
                <div class="item_right_four"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./layui/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    let itemRightOne = document.querySelector(".item_right_one");
    let itemRightTwo = document.querySelector(".item_right_two");
    function personShow() {
        itemRightOne.style.display = "block";
        itemRightTwo.style.display = "none";
    }

    function personUpdate() {
        itemRightTwo.style.display = "block";
        itemRightOne.style.display = "none";
    }
    // $.ajax({
    //     url:'/java/com/zlt/dao/Impl/information',
    //     success:function(){
    //
    // }
    // }
    layui.use(['form', 'util', 'laydate','upload',  'element','layer'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 0) {
                    return '姓名不能为空';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });

        //指定开关事件
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //提交事件
        form.on('submit(demo1)', function (data) {
            alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function () {
            form.val('example', {
                "username": "贤心" // "name": "value"
                , "password": "123456"
                , "interest": 1
                , "like[write]": true //复选框选中状态
                , "close": true //开关状态
                , "sex": "女"
                , "desc": "我爱 layui"
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });
        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            "get-vercode": function (othis) {
                var isvalid = form.validate('.demo-phone'); // v2.7.0 新增
                // 验证通过
                if (isvalid) {
                    layer.msg('手机号验证通过，执行发送验证码的操作');
                }
            }
        });



    });
</script>
<!--        <script>-->
<!--        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作-->
<!--        layui.use('element', function(){-->
<!--            var element = layui.element;-->
<!--        });-->
<!--  </script>-->
</html>